<template>
	<view>
		<view class="workorder">
			<view class="add-workorder">
				<u-button @click="create" class="add-workorder-button" :customStyle="addWorkorderCustomStyle" size="mini" type="primary"><u-icon name="plus"></u-icon> 添加工单</u-button>
			</view>
			<view v-for="(item, index) in orders" :key="index" class="workorder-item">
				<navigator :url="'/pages/workorder-info/workorder-info?id=' + item.id" class="workorder-base">
					<image :src="item.logo_image" class="logo" mode="widthFix"></image>
					<view class="workorder-info">
						<view class="title">{{item.title}}</view>
						<view class="info-buttom">
							<u-tag type="primary" :text="item.urgentrank.name" plain shape="circle"></u-tag>
							<text class="createtime">{{item.createtime_text}}</text>
						</view>
					</view>
				</navigator>
				<view class="workorder-buttom">
					<u-tag :type="item.status.type" @click="info(item.id)" :text="item.status.original" plain shape="circle"></u-tag>
					<view class="workorder-buttom-button">
						<u-button @click="info(item.id)" type="info" class="button-item" size="mini">详情</u-button>
						<u-button @click="evaluate(item.id)" v-if="(item.status.number == 2) || (item.status.number == 3) || (item.status.number == 4)" type="warning" class="button-item" size="mini">评价</u-button>
						<u-button @click="deleteOrder(item.id, item.title)" v-if="item.status.number == 5" type="error" class="button-item" size="mini">删除</u-button>
					</view>
				</view>
			</view>
			<view v-if="(!orders.length) || (!next)" class="data-none">没有更多了...</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orders: [],
				next: false,
				refreshIng: false,
				addWorkorderCustomStyle: {
					fontSize: '28rpx',
					height: '60rpx'
				}
			}
		},
		onLoad(query) {
			if (query.order_id) {
				uni.navigateTo({
					url: '/pages/workorder-info/workorder-info?id=' + query.order_id
				})
				return false;
			}
		},
		onPullDownRefresh: function () {
			this.refreshIng = true
			this.load()
		},
		onShow() {
			this.load()
		},
		onReachBottom: function () {
			if (this.next) {
				this.load(parseInt(this.next) + 1)
			}
		},
		methods: {
			load: function (page = 1) {
				var that = this
				that.$u.api.my({
					page: page
				}).then(res => {
					if (res.code == 1) {
						that.next = res.data.next ? page:false
						for (let o in res.data.orders) {
							switch (res.data.orders[o].status.number) {
								case 0:
									res.data.orders[o].status.type = 'success';
									break;
								case 1:
									res.data.orders[o].status.type = 'success';
									break;
								case 2:
									res.data.orders[o].status.type = 'primary';
									break;
								case 3:
									res.data.orders[o].status.type = 'warning';
									break;
								case 4:
									res.data.orders[o].status.type = 'error';
									break;
								case 5:
									res.data.orders[o].status.type = 'info';
									break;
							}
						}
						if (parseInt(res.data.page) == 1) {
							that.orders = res.data.orders
						} else {
							that.orders = that.orders.concat(res.data.orders)
						}
						if (that.refreshIng) {
							uni.stopPullDownRefresh()
							that.refreshIng = false
							that.$u.toast('刷新成功~');
						}
					} else {
						that.$u.toast(res.msg);
					}
				}).catch(res => {
					that.$u.toast('请求失败，请重试！');
				})
			},
			info: function (id) {
				uni.navigateTo({
					url: '/pages/workorder-info/workorder-info?id=' + id
				})
			},
			create: function () {
				uni.navigateTo({
					url: '/pages/workorder/category'
				})
			},
			evaluate: function (id) {
				uni.navigateTo({
					url: '/pages/workorder-info/evaluate?id=' + id
				})
			},
			deleteOrder: function (id, title) {
				var that = this
				uni.showModal({
					title: '确认删除',
					content: '您确认要删除工单`' + title + '`吗？',
					success: res => {
						if(res.confirm) {
							this.$u.api.delOrder({
								order_id: id
							}).then(res => {
								that.$u.toast(res.msg);
								if (res.code == 1) {
									that.load()
								}
							}).catch(res => {
								that.$u.toast('请求失败，请重试！');
							})
						}
					}
				})
			}
		}
	}
</script>

<style>
page {
	background: #F8F8F8;
}
.data-none {
	color: #999999;
	height: 100rpx;
	line-height: 100rpx;
	text-align: center;
}
.workorder {
	width: 94%;
	margin: 20rpx auto;
	margin-top: 0;
}
.workorder-item {
	background: #FFFFFF;
	border-radius: 16px;
	padding: 20rpx;
	margin-bottom: 20rpx;
}
.workorder-base {
	display: flex;
}
.logo {
	width: 120rpx;
	height: 120rpx;
}
.workorder-info {
	padding-left: 16rpx;
	width: 100%;
}
.title {
	font-size: 30rpx;
	font-weight: bold;
	margin-bottom: 10rpx;
}
.info-buttom {
	display: flex;
	width: 100%;
	align-items: center;
}
.createtime {
	display: block;
	margin-left: auto;
	color: #999;
	align-self: flex-end;
}
.workorder-buttom {
	border-top: 1px solid #F8F8F8;
	margin-top: 20rpx;
	padding-top: 20rpx;
	display: flex;
}
.workorder-buttom-button {
	margin-left: auto;
}
.button-item {
	margin: 0 10rpx;
}
.add-workorder {
	height: 100rpx;
}
.add-workorder-button {
	float: right;
	margin-top: 10rpx;
}
</style>
